<div class="thumbnail">
    <img src="http://placehold.it/820*320">
    <div>
        <h4 class="pull-right">{{ product.price }}</h4>
        <h4> {{ product.title }} </h4>
        <p>{{ product.description }}</p>
    </div>
    
    <div class="ratings">
        <p class="pull-right">{{ reviews.length }}</p>
        <p><app-stars [rating]="product.rating"></app-stars></p>
    </div>

    <div class="well" id="reviews-anchor">
        <div class="row">
            <div class="col-md-12"></div>
        </div>

        <div class="text-right">
            <button (click)="isReviewHidden = !isReviewHidden" 
            class="btn btn-success btn-green">Leave a Review</button>
        </div>

        <div [hidden]="isReviewHidden">
            <div>
                <app-stars [(rating)]="newRating" [readonly]="false" class="large"></app-stars>
            </div>
            <div>
                <textarea [(ngModel)]="newComment"></textarea>
            </div>
            <div>
                <button (click)="addReview()" class="btn">Add review</button>
            </div>
        </div>

        <div class="row" *ngFor="let review of reviews">
            <hr>
            <div class="col-md-12">
                <app-stars [rating]="review.rating"></app-stars>
                <span>{{ review.user }}</span>
                <span class="pull-right">{{ review.timestamp | date: 'shortDate' }}</span>
                <p>{{ review.comment }}</p>
            </div>
        </div>
    </div>
</div>